import React, { useState, useEffect } from 'react'
import { Button, Drawer, Form, Input, Select,DatePicker } from 'antd';
import MyNotification from '../../components/MyNotification/MyNotification';
import { $add,$getOne,$update } from '../../api/guestApi';
import { $list as $roomList } from '../../api/roomApi'
import { $list as $typeList } from '../../api/typeApi';
import { $listToUpdate as $stateList } from '../../api/stateApi';

import 'dayjs/locale/zh-cn';
import dayjs from 'dayjs';
import local from 'antd/es/date-picker/locale/zh_CN';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment/moment';
export default function AddGuest({ open, setOpen, loadList, guestId, setGuestId }) {
    let [form] = Form.useForm()
    let [typeList, setTypeList] = useState([])
    let [roomList,setRoomList]=useState([])
    let [stateList, setStateList] = useState([])
    let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })
    const loadTypeList = () => {
        $typeList().then((data) => {
            console.log(data)
            data = data.map((r) => {
                return {
                    value: r.roomTypeId,
                    label: r.roomTypeName
                };
            });
            data.unshift({ value: 0, label: '请选择房型' })
            setTypeList(data);
        })
    }
    const loadRoomList = (roomTypeId) => {
        $roomList({roomTypeId,roomStateId:1,pageSize:99,guestId}).then(({data}) => {
            data = data.map((r) => {
                return {
                    value: r.roomId,
                    label: r.roomId
                }
            })
            data.unshift({ value: 0, label: '请选择房间状态' })
            setRoomList(data);
        })
    }
    useEffect(() => {
        loadTypeList()
        if (guestId != 0) {
            console.log(guestId)
            $getOne({ guestId }).then((data) => {
                data.resideDate=dayjs(data.resideDate)
                data.roomTypeId=data.room.roomTypeId
                form.setFieldsValue(data)
            })
        }
    }, [guestId])
    const onClose = () => {
        clear()
        setGuestId(0)
        setOpen(false)
    }
    const onFinish = (values) => {
        console.log("===========================" + values)
        if (guestId) {
            $update(values).then(({ success, message }) => {
                if (success) {
                    setNotiMsg({ type: 'success', description: message })
                    loadList()
                } else {
                    setNotiMsg({ type: 'error', description: message })
                }
            })
        } else {
            $add(values).then(({ success, message }) => {
                if (success) {
                    setNotiMsg({ type: 'success', description: message })
                    clear()
                    loadList()
                } else {
                    setNotiMsg({ type: 'error', description: message })
                }
            })
        }
    };
    const clear = () => {
        form.resetFields();
    }
    return (
        <>
            <Drawer title={guestId != 0 ? "修改顾客" : "添加顾客"} width={500} placement='right' onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    // initialValues={{
                    //     remember: true,
                    // }}
                    onFinish={onFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="顾客编号"
                        name="guestId"
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="顾客姓名"
                        name="guestName"
                        rules={[
                            {
                                required: true,
                                message: '请输入顾客姓名',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="身份证号"
                        name="identityId"
                        rules={[
                            {
                                required: true,
                                message: '请输入身份证号',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="房型"
                        name="roomTypeId"
                        rules={[
                            {
                                required: true,
                                message: '请选择房型',
                            },
                        ]}
                    >
                        <Select size="small" style={{ width: '100px' }}
                            options={typeList}
                            onSelect={(roomTypeId)=>{
                                form.setFieldValue('roomId','')
                                loadRoomList(roomTypeId)}}
                        ></Select>
                    </Form.Item>

                    <Form.Item
                        label="房间"
                        name="roomId"
                        rules={[
                            {
                                required: true,
                                message: '请选择房间',
                            },
                        ]}
                    >
                        <Select size="small" style={{ width: '100px' }}
                            options={roomList}
                        ></Select>
                    </Form.Item>
                    <Form.Item
                        label="入住日期"
                        name="resideDate"
                        rules={[
                            {
                                required: true,
                                message: '请输入入住日期',
                            },
                        ]}
                    >
                        <DatePicker showTime  placeholder='请选择入住日期' locale={locale}/>
                    </Form.Item>
                    <Form.Item
                        label="押金"
                        name="deposit"
                        rules={[
                            {
                                required: true,
                                message: '请输入押金',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="入住人数"
                        name="guestNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入入住人数',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>



                    <Form.Item
                        wrapperCol={{
                            offset: 4,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            {guestId ? '修改' : '添加'}
                        </Button>
                        <Button onClick={clear} style={{ marginLeft: '10px' }}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <MyNotification notiMsg={notiMsg} />
        </>
    )
}

